<template>
    <div>
        <div class="navbar-div">
             <van-nav-bar   title="商品列表" /> 
        </div>
        <div>
    <van-row>
        <van-col span="6">
            <div id="leftNav">
                <ul>
        <li v-for="(item,index) in categoryList" :key="index"  @click='clickCategory(index,item.ID)' :class='{categoryActive:categoryIndex==index}'>
            {{item.MALL_CATEGORY_NAME}}
        </li>
          </ul>
            </div>
        </van-col>
        
        <van-col span="18">
                <!-- 二级联动 -->
                <div class="tabCategorySub">
                <van-tabs v-model="active" @click="onClickCategorySub"> 
                       <van-tab  v-for="(item,index) in categorySub" :key="index" :title="item.MALL_SUB_NAME"></van-tab>
                </van-tabs>
                 </div>

          <div id="list-div">
               <!-- 上拉刷新 -->
                <van-pull-refresh v-model="isRefresh" @refresh="onRefresh()">
                     <!-- 下拉加载 -->
                    <van-list
                        v-model="loading"
                        :finished="finished"
                        @load="onLoad()"
                        >
                        <div class="list-item" @click="getGoodsInfo(item.ID)" v-for="(item,index) in goodList" :key="index">
                          <div class="list-item-img">
                                <img :src="item.IMAGE1" 
                                :onerror='errorImg'
                                width="100%">
                          </div>
                          <div class="list-item-text">
                               <div>{{item.NAME}}</div>
                               <div>￥{{item.ORI_PRICE | moneyFilter}}</div>
                          </div>
                        </div>
                    </van-list>

                </van-pull-refresh>
        </div>


        </van-col>
    </van-row>

    </div>
</div>
</template>

<script>
import axios from 'axios'
import url from "@/serviceAPI.config.js"; 
import { toMoney } from '@/filter/moneyFilter.js'
    export default {
        data(){
             return{
                categoryList:[],//商品大类数据
                categoryIndex:0,//控制是否categoryActive样式
                categorySub:[],//商品小类列表头数据
                active:0,//激活标签的值
                loading:false,   //上拉加载使用
                finished:false,  //上拉加载没完成
                page:1,
                goodList:[],//商品小类列表数据
                categorySubId:'',//商品小类列表Id
                isRefresh:false,//下拉刷新状态
                errorImg:'this.src="'+require('@/assets/images/errorimg.png')+'" '//替换失效图片
             }
        },
        filters:{
            moneyFilter(money){
                return toMoney(money)
            }
        },
        created(){
                this.getCategory();
                //如何进入页面就获取到对应id的小类商品列表头数据？(将大类商品ID拿到并传给小类商品列表头接口)
                // this.getCategorySubByCategoryId(1)//测试用数字1的方法
                //方法二：在大类商品数据请求的时候，将ID等于1传给小类商品列表头接口
        },
        mounted(){
            // 自适应屏幕高
            let winHeight = document.documentElement.clientHeight
            document.getElementById("leftNav").style.height= winHeight-45-50 +'px'
            document.getElementById("list-div").style.height= winHeight-90-50 +'px'
        },
        methods:{
            //点击大类
            clickCategory(index,categoryId){//通过参数传递把商品大类列表遍历出来的item.ID传入  item.ID == categoryId
                 this.categoryIndex=index
                 this.getCategorySubByCategoryId(categoryId)
                 //初始化小类列表数据
                 this.page = 1
                 this.finished = false
                 this.goodList =[]

            },
            //获取商品大类列表
            getCategory(){
                 axios({
                 method:'get',
                 url:url.categoryList,
             }).then(res=>{
                 if(res.data.code == 200 && res.data.message) {
                     this.categoryList = res.data.message
                     this.getCategorySubByCategoryId(this.categoryList[0].ID)//将大类商品ID=1传给小类商品列表头调用接口的函数
                 }else{
                     console.log('服务器发生错误')
                 }
             }).catch(error=>{
                 console.log(error)
             })
            },
       //根据商品大类ID读取小类列表头数据
       getCategorySubByCategoryId(categoryId){
                axios({
                    url:url.categorySubList,
                    method:'post',
                    data:{categoryId:categoryId}//通过参数拿到大类列表的ID传入小类列表头的koa服务器编写小类接口的代码里。
                })
                .then(res=>{
                    if(res.data.code == 200 && res.data.message ){
                        this.categorySub=res.data.message//读取从koa服务传递过来的message数据.
                        this.active = 0//小类商品列表头根据大类商品传递过来的ID发生变化时，active会将它默认为小类列表展示第一个。
                        console.log(res.data.message)
                        this.categorySubId = this.categorySub[0].ID//初始化小类商品列表数据
                        this.onLoad()
                    }else{
                        Toast('服务器错误，数据取得失败')
                    }  
                })
                .catch(error=>{
                    console.log(error)
                }) 
},
            //上拉加载函数
            onLoad(){
                setTimeout(()=>{
                    this.categorySubId = this.categorySubId?this.categorySubId:this.categorySub[0].ID//三目运算符判断
                    this.getGoodList()
                },1000)
            },
            //下拉刷新函数
            onRefresh(){
                  setTimeout(()=>{
                      this.isRefresh = false
                      this.goodList = []
                      this.page = 1
                      this.onLoad()
                      this.finished = false
                  },500)
            },
            //获取商品小类列表数据
        getGoodList(){
                  axios({
                      url:url.goodsListByCategorySubID ,
                      method:'post',
                      data:{
                          categorySubId:this.categorySubId,//将categorySubId传给koa服务器
                          page:this.page,
                      }
                  }).then(res=>{
                      if(res.data.code == 200 && res.data.message.length){
                          this.page++
                          this.goodList = this.goodList.concat(res.data.message)//根据categorySubId传给koa服务器返回回来的商品小类列表数据
                      }else{
                          this.finished=true
                      }
                      this.loading = false
                  }).catch(error=>{
                      console.log(error)
                  })
        },
        //点击列表头部读取对应的商品列表信息的方法
        onClickCategorySub(index){
            //index是active的数值
              console.log(index == this.active)
              this.categorySubId =  this.categorySub[index].ID//通过列表头数据ID拿到对应商品列表ID,
              this.goodList = []//初始化当前列表数据
              this.finished = false
              this.page = 1//初始化当前页数
              this.onLoad()
        },
        getGoodsInfo(id){
              this.$router.push({name:'Goods',params:{goodsId:id}})
        }
}    
    
    
}
</script>

<style scoped>
.van-nav-bar{
    background: #f44;
}
#leftNav{
    background:aliceblue;
}
#leftNav ul li {
    line-height: 2rem;
    border-bottom:1px solid #E4E7ED;
    padding:3px;
    font-size:0.8rem;
    text-align: center;
}
.categoryActive{
    background-color:#f44;
}
.list-item{
        display: flex;
        flex-direction: row;
        font-size:0.8rem;
        border-bottom: 1px solid #f0f0f0;
        background-color: #fff;
        padding:5px;
    }
    #list-div{
        /* 滚动条隐藏 */
        overflow: scroll;
    }
    .list-item-img{
        flex:8;
    }
    .list-item-text{
        flex:16;
        margin-top:10px;
        margin-left:10px;
    }
</style>